<template>
  <a-card class="missions w-[100%]" :body-style="{ padding: 0 }">
    <div class="flex justify-between w-[100%]">
      <div class="window-icon flex flex-s system__hover" @click.capture="openMenu">
        <div>
          <img :src="logo" width="20" />
        </div>
      </div>
      <Tabs />
      <a-flex>
        <NetConfig></NetConfig>
        <Notice />
      </a-flex>
    </div>
  </a-card>
  <Starter />
</template>

<script setup lang="ts">
import logo from '@/assets/logo.png';
import Starter from '../starter/Starter.vue';
import { showStarter } from '../starter/data';
import NetConfig from './net/NetConfig.vue';
import Notice from './notice/Notice.vue';
import Tabs from './tabs/Tabs.vue';

const openMenu = () => {
  showStarter.value = !showStarter.value;
};
</script>

<style lang="scss" scoped>
.missions {
  height: 42px;
  border-top: 1px solid #69696928;
  border-radius: 0;
  background: var(--underpainting) !important;
  box-shadow: none;
  z-index: 10;
  .window-icon {
    width: 42px;
    border-right: 1px solid var(--border-color);
  }
}
</style>
